<template>
  <div class="shop_admin">
    <div class="table_tab_box">
      <el-tabs v-model="activeName">
        <div class="table_input">
          <p>
            <span>商品分类:</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </p>
          <p>
            <span>商品搜索:</span>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </p>
        </div>
        <p>
          <el-button type="primary" @click="$router.push('/addshop')"
            >添加商品</el-button
          >
        </p>
      </el-tabs>
      <!-- 表格 -->
      <el-table :data="tableData" border="" style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="200"
        ></el-table-column>
        <el-table-column label="商品图" width="150">
          <template slot-scope="">
            <img
              src="../../../../assets/img/1.gif"
              alt=""
              style="height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column
          prop="price"
          label="售价"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="paynum"
          label="销量"
          width="120"
        ></el-table-column>
        <el-table-column prop="have" label="库存" width="200"></el-table-column>
        <el-table-column
          prop="sortnum"
          label="排序"
          width="120"
        ></el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <el-switch
              style="width: 180px"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="上架"
              inactive-text="下架"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="timer"
          label="操作时间"
          width="180"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, scope.$index)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="delItem(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
        @current-change="currentChange">
      </el-pagination>
      <!-- //弹框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <div>
          <el-form
            ref="form"
            :model="setData"
            label-width="80px"
            :rules="rules"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="setData.name" />
            </el-form-item>
            <el-form-item label="售价" prop="price">
              <el-input v-model="setData.price" />
            </el-form-item>
            <el-form-item label="销量" prop="paynum">
              <el-input v-model="setData.paynum" />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editShop">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      setData: {
        name: "",
        price: "",
        paynum: "",
      },
      //规则
      rules: {
        name: [{ required: true, message: "文本框不能为空", trigger: "blur" }],
        price: [{ required: true, message: "文本框不能为空", trigger: "blur" }],
        paynum: [
          { required: true, message: "文本框不能为空", trigger: "blur" },
        ],
      },
      tableData: [], //数据
      value: "", //下拉
      input: "", //搜索框
      activeName: "1",
      dialogVisible: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      flat: false, //开关
    };
  },
  created() {
    axios({
      url: "/getShopAdmin",
      method: "post",
      data: {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      },
    }).then((res) => {
      console.log(res.data.data);
      this.tableData = res.data.data;
      this.total = res.data.total;
    });
  },
  watch: {},
  methods: {
    goSell(){
      this.$router.push('/management/sell')
    },
    goWarehouse(){
      this.$router.push('/management/warehouse')
    },
    currentChange(value){
      this.pageIndex = value
      axios({
      url: "/getShopAdmin",
      method: "post",
      data: {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      },
    }).then((res) => {
      console.log(res.data.data);
      this.tableData = res.data.data;
      this.total = res.data.total;
    });
    },
    handleClick(row) {
      this.setData = { ...row };
      this.dialogVisible = true;
    },
    delItem(row) {
      this.tableData = this.tableData.filter((item) => {
        return item.id !== row.id;
      });
    },
    editShop() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          console.log(this.setData);
          /*
            不管是编辑还是新增，到这一步之后，要修改的数据和要新增的数据
            直接请求一个接口，编辑的接口和新增是一个接口，后端通过id
          */
          this.tableData.forEach((item) => {
            if (item.id === this.setData.id) {
              item.name = this.setData.name;
              item.price = this.setData.price;
              item.paynum = this.setData.paynum;
            }
          });
          this.setData = {
            name: "",
            province: "",
            city: "",
          };
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.shop_admin {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px;
  .table_tab_box {
    width: 100%;
    background: #fff;
    p {
      margin: 10px 0;
    }
    .table_input {
      width: 100%;
      display: flex;
      margin: 10px 0;
      p {
        display: flex;
        margin: 0 10px;
        align-items: center;
        .el-input,
        .el-select {
          width: 300px;
        }
        span {
          width: 30%;
          text-align: right;
          padding: 0 10px;
        }
      }
    }
  }
  .table_fen_box {
    width: 100%;
    margin-top: 8px;
  }
}
</style>
